<template>
  <el-container direction="vertical">
    <el-header class="center-big">新建会议</el-header>
    <el-main>
      <div id="input-top">
        <div class="input-card">
          <p class="align-left">*会议名：</p>
          <el-input
            class="input"
            placeholder="会议名, 留空为defalut"
            v-model="room_name"
          ></el-input>
        </div>
        <div class="input-card">
          <p class="align-left">密码：</p>
          <el-input
            class="input"
            placeholder="留空则为无密码"
            v-model="password"
          ></el-input>
        </div>
        <div></div>
      </div>
      <el-button type="primary" @click="new_meeting"> 创建会议 </el-button>
    </el-main>
  </el-container>
</template>

<script lang="ts">
import { defineComponent, ref, Ref } from "vue";
import { new_room_id } from "../utils/roomid";
import router from "../router";

export default defineComponent({
  setup() {
    const room_name = ref("default");
    const password: Ref<null | string> = ref(null);

    const new_meeting = async () => {
      if (room_name.value === "") {
        room_name.value = "defalut";
      }
      const room_id = await new_room_id(room_name.value, password.value);
      router.push({ name: "meeting", params: { id: room_id } });
    };
    return { room_name, password, new_meeting };
  },
});
</script>

<style>
.input-card {
  display: block;
  max-width: 350px;
}

.align-left {
  text-align: left;
}

#input-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 30px;
}
</style>
